import React, { Component } from 'react';
import {
	StyleSheet, View, Text,
	Image, PixelRatio, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../../config/global';
import { style } from '../../theme/style';
import { ScrollView } from 'react-native-gesture-handler';

const scale = GLOBAL.SCALE;
export class PageSelectModal extends Component {
	constructor(props) {
		super(props);
	}

	/* 
	data : 数据, 数据格式   [title:'',fn:每条列表点击的函数]
	allClick:点击列表之外的点击事件
	styleList：每条列表的样式
	styleBox：盒子外面的样式
	styleOut:阴影样式
	imgIndex: 代表当前状态（对勾）
	itemFn: 点击当前栏目的事件
	*/
	render () {
		let { data, allClick, styleList, styleBox, imgIndex, itemFn, styleOut } = this.props;
		let imgObj = require('../../imgs/global/correct.png');
		return (
			<TouchableOpacity activeOpacity={1} style={[styles.boxShow, styleOut]} onPress={allClick} >
				<ScrollView style={{ flex: 1 }}>
					<View style={[styles.boxList, styleBox]}>
						{data.map((item, index) => {
							return (
								<TouchableOpacity onPress={() => { itemFn && itemFn({ index, item: item, page: item.page || null }); }} key={index} style={[styles.listSelect, styleList]}>
									<Text style={styles.listSelectText}>{item.title}</Text>
									{
										index == imgIndex ? <Image style={styles.listImg} source={imgObj} /> : null
									}
								</TouchableOpacity>
							)
						})
						}
					</View>
				</ScrollView>
			</TouchableOpacity >
		)
	}
}

const styles = StyleSheet.create({
	boxShow: {
		flex: 1,
		position: 'absolute',
		width: '100%',
		height: '100%',
		backgroundColor: 'rgba(0,0,0,0.5)',
		zIndex: 9
	},
	boxList: {
		width: '100%',
		paddingLeft: 15 * scale,
		paddingRight: 15 * scale,
		backgroundColor: style.color.white,
	},
	listSelect: {
		height: 50 * scale,
		width: '100%',
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.border,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center'
	},
	listSelectText: {
		color: style.color.dark,
		fontSize: 13 * scale,
		lineHeight: 50
	},
	listImg: { width: 14 * scale }
})